<template>
    <div class="app-container">

        <el-row :gutter="20" class="header">
            <el-col :span="7">
                <el-input placeholder="请输入用户名..." v-model="queryForm.query" clearable ></el-input>
            </el-col>
            <el-button type="primary" :icon="Search" @click="initUserList">搜索</el-button>
            <el-button type="success" :icon="DocumentAdd" @click="handleDialogValue()" v-if="store.HAS_AUTH('system:user:add')">新增</el-button>
            <el-popconfirm title="您确定批量删除这些记录吗？" @confirm="handleDelete(null)">
                <template #reference>
                    <el-button type="danger" :disabled="delBtnStatus" :icon="Delete" v-if="store.HAS_AUTH('system:user:delete')">批量删除</el-button>
                </template>
            </el-popconfirm>
        </el-row>

        <el-table :data="tableData"
                  stripe style="width: 100%"
                  @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="avatar" label="头像" width="80" align="center">
                <template v-slot="scope">
                    <img :src="getServerUrl()+'image/userAvatar/'+scope.row.avatar" width="50" height="50"/>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="100" align="center"/>
            <el-table-column prop="roles" label="拥有角色" width="200" align="center">
                <template v-slot="scope">
                    <el-tag size="small" type="warning" v-for="(item,index) in scope.row.sysRoleList" :key="index">   {{item.name}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="200" align="center"/>
            <el-table-column prop="phonenumber" label="手机号" width="120" align="center"/>
            <el-table-column prop="status" label="状态？" width="200" align="center" >
                <template v-slot="{row}" >
                    <el-switch  v-model="row.status" @change="statusChangeHandle(row)" active-text="正常"
                                inactive-text="禁用" active-value="0" inactive-value="1" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="200" align="center"/>
            <el-table-column prop="loginDate" label="最后登录时间" width="200" align="center"/>
            <el-table-column prop="remark" label="备注"  />
            <el-table-column prop="action" label="操作" width="400" fixed="right" align="center">
                <template v-slot="scope" >
                    <el-button  type="primary" :icon="Tools"  @click="handleRoleDialogValue(scope.row.id,scope.row.sysRoleList)" v-if="store.HAS_AUTH('system:user:role')">分配角色</el-button>
                    <el-button v-if="scope.row.username!='myz' && store.HAS_AUTH('system:user:edit')" type="primary" :icon="Edit" @click="handleDialogValue(scope.row.id)" />

                    <el-popconfirm  v-if="scope.row.username!='myz'" title="您确定要对这个用户重置密码吗？" @confirm="handleResetPassword(scope.row.id)">
                        <template #reference>
                            <el-button  type="warning" :icon="RefreshRight" v-if="store.HAS_AUTH('system:user:resetPwd')">重置密码</el-button>
                        </template>
                    </el-popconfirm>

                    <el-popconfirm  v-if="scope.row.username!='myz'" title="您确定要删除这条记录吗？" @confirm="handleDelete(scope.row.id)">
                        <template #reference>
                            <el-button  type="danger" :icon="Delete" v-if="store.HAS_AUTH('system:user:delete')"/>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>


        </el-table>

    <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="queryForm.pageNum"
            v-model:page-size="queryForm.pageSize"
            :page-sizes="[5,10,15,20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>

    </div>
    <Dialog v-model="dialogVisible" :dialogVisible="dialogVisible" :id="id" :dialogTitle="dialogTitle" @initUserList="initUserList"></Dialog>
    <RoleDialog v-model="roleDialogVisible" :sysRoleList="sysRoleList" :roleDialogVisible="roleDialogVisible" :id="id" @initUserList="initUserList"></RoleDialog>
</template>

<script setup>
import requestUtil, {getServerUrl} from "../../../utils/request.js"
import {ref} from "vue"
import {Delete, DocumentAdd, Edit, RefreshRight, Search, Tools} from "@element-plus/icons-vue";
import {ElMessage,ElNotification} from 'element-plus'
import Dialog from "./component/Dialog.vue"
import RoleDialog from "./component/RoleDialog.vue"
import {XCStore} from "@/store/XCStore.js";

const store = XCStore()

const delBtnStatus = ref(true) // 删除标识符，true表示不能删除

const multipleSelection=ref([])  // 批量删除id

const tableData = ref({})

const sysRoleList = ref([])

const queryForm = ref({
    query: '',
    pageNum: 1,
    pageSize: 5
})

const total = ref(0)

const dialogVisible=ref(false)

const roleDialogVisible=ref(false)

const dialogTitle=ref('')

const id=ref(-1)

// 获取用户所有信息（分页的用户信息、角色信息...）
const initUserList = async ()=> {
    const result = await requestUtil.post(`sys/user/list`, queryForm.value)
    const data = result.data
    console.log(data.data)
    if (data.status === 200) {
        tableData.value = data.data.info
        total.value = data.data.total
    }else{
        ElMessage.error(data.data)
    }
}
initUserList()

// 处理分页布局
const handleSizeChange=(pageSize)=>{
    queryForm.value.pageNum = 1
    queryForm.value.pageSize=pageSize
    initUserList()
}

const handleCurrentChange = (pageNum)=>{
    queryForm.value.pageNum = pageNum
    initUserList()
}

/*以userId标志变量的值来判断是进行用户修改还是添加*/
const handleDialogValue = (userId)=>{
    console.log(userId)
    if(userId){
        id.value = userId;
        dialogTitle.value = "用户修改"
    }else{
        id.value = -1;
        dialogTitle.value = "用户添加"
    }
    dialogVisible.value = true
}

// 给用户分配好角色
// 且让role修改标志变量为true
const handleRoleDialogValue = (userId,roleList)=>{
    console.log("userId="+userId)
    id.value=userId;
    sysRoleList.value=roleList;
    roleDialogVisible.value=true
}

const handleSelectionChange = (selection)=>{
    // 有选择项才有批量删除
    if(selection.length>0) delBtnStatus.value = false;
    else delBtnStatus.value = true
    multipleSelection.value = selection
}
const handleDelete=async (id)=>{
    var ids = []
    if(id){
        ids.push(id)
    }else{
        multipleSelection.value.forEach(row=>{
            if(row.id !=1 ) ids.push(row.id)
        })
    }
    const res=await requestUtil.post("sys/user/delete",ids)
    if(res.data.status==200){
        ElMessage({
            type: 'success',
            message: res.data.data
        })
        initUserList();
    }else{
        ElMessage({
            type: 'error',
            message: res.data.data,
        })
    }
}

const handleResetPassword = async (id)=>{
    const res = await requestUtil.get(`sys/user/resetPassword/${id}`)
    const data = res.data
    if(data.status == 200){
        ElMessage.success(data.data)
        initUserList();
    }else{
        ElMessage.error(data.data)
    }
}

const statusChangeHandle = async (row) => {
    if(store.HAS_AUTH('system:user:edit')) {
        const res = await requestUtil.get(`sys/user/updateStatus/${row.id}/status/${row.status}`)
        const data = res.data
        if (data.status === 200) {
            ElMessage.success(data.data)
        } else {
            ElMessage.error(data.data)
            initUserList();
        }
    }else{
        ElMessage.error("你没有权限修改")
        initUserList()
    }
}


/*
async function test(){
    const result = await requestUtil.post(`sys/user/list`,queryForm.value)
    const data = result.data
    console.log(data)
    if(data.status==200){
        console.log(data.data)
    }
}
*/
</script>

<style scoped>


.app-container{
    width:100%;
    overflow: hidden;
}

.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}
.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
.header{
    padding-bottom: 16px;
    box-sizing: border-box;
}

.el-pagination{
    float: right;
    padding: 20px;
    box-sizing: border-box;
}

.el-table__cell{
    word-break: break-word;
    background-color: #f8f8f9 !important;
    color: #515a6e;
    height: 40px;
    font-size: 13px;

}

.el-tag--small {
    margin-left: 5px;
}

</style>